<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      :label="`${headers[0].name}` + `(${headers[0].count})`"
      :name="headers[0].name"
    >
      <el-content :num="1" @send="updateList">
        <el-tab :tableData="list" :num="1">
          <template v-slot:info>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品分类">
                    <span>{{ props.row.cateValues }}</span>
                  </el-form-item>
                  <el-form-item label="市场价">
                    <span>{{ props.row.price }}</span>
                  </el-form-item>
                  <el-form-item label="成本价">
                    <span>{{ props.row.cost }}</span>
                  </el-form-item>
                  <el-form-item label="收藏">
                    <span>{{ props.row.collectCount }}</span>
                  </el-form-item>
                  <el-form-item label="虚拟销量">
                    <span>{{ props.row.ficti }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="ID" prop="id"> </el-table-column>
          <el-table-column label="商品图" prop="image">
            <template slot-scope="scope">
              <img :src="scope.row.image" class="img" />
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="storeName"
            width="250"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="商品售价" prop="price"> </el-table-column>
          <el-table-column label="销量" prop="ficti" width="100"> </el-table-column>
          <el-table-column label="库存" prop="stock"> </el-table-column>
          <el-table-column label="排序" prop="sort"> </el-table-column>
          <el-table-column label="添加时间" prop="addTime"> </el-table-column>
          <el-table-column label="状态" prop="isShow" width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isShow"
                active-text="上架"
                @click.native="down1(scope.row.id, 1)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="name">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="go_info(scope.row.id, 1)"
                >详情
              </el-link>
              <el-link type="primary" :underline="false">加入回收站</el-link>
            </template>
          </el-table-column>
        </el-tab>
      </el-content>
    </el-tab-pane>
    <el-tab-pane
      :label="`${headers[1].name}` + `(${headers[1].count})`"
      :name="headers[1].name"
    >
      <el-content :num="2" @send="updateList">
        <el-tab :tableData="list1" :num="2">
          <template v-slot:info>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品分类">
                    <span>{{ props.row.cateValues }}</span>
                  </el-form-item>
                  <el-form-item label="市场价">
                    <span>{{ props.row.price }}</span>
                  </el-form-item>
                  <el-form-item label="成本价">
                    <span>{{ props.row.cost }}</span>
                  </el-form-item>
                  <el-form-item label="收藏">
                    <span>{{ props.row.collectCount }}</span>
                  </el-form-item>
                  <el-form-item label="虚拟销量">
                    <span>{{ props.row.ficti }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="ID" prop="id"> </el-table-column>
          <el-table-column label="商品图" prop="image">
            <template slot-scope="scope">
              <img :src="scope.row.image" class="img" />
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="storeName"
            width="250"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="商品售价" prop="price"> </el-table-column>
          <el-table-column label="销量" prop="ficti" width="100"> </el-table-column>
          <el-table-column label="库存" prop="stock"> </el-table-column>
          <el-table-column label="排序" prop="sort"> </el-table-column>
          <el-table-column label="添加时间" prop="addTime"> </el-table-column>
          <el-table-column label="状态" prop="isShow" width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isShow"
                active-text="上架"
                @click.native="down2(scope.row.id, 2)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="name">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="go_info(scope.row.id, 1)"
                >详情</el-link
              >
              <el-link type="primary" :underline="false" @click="compile(scope.row.id)"
                >编辑</el-link
              >
              <el-link type="primary" :underline="false">加入回收站</el-link>
            </template>
          </el-table-column>
        </el-tab>
      </el-content>
    </el-tab-pane>
    <el-tab-pane
      :label="`${headers[2].name}` + `(${headers[2].count})`"
      :name="headers[2].name"
    >
      <el-content :num="3" @send="updateList">
        <el-tab :tableData="list2" :num="3">
          <template v-slot:info>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品分类">
                    <span>{{ props.row.cateValues }}</span>
                  </el-form-item>
                  <el-form-item label="市场价">
                    <span>{{ props.row.price }}</span>
                  </el-form-item>
                  <el-form-item label="成本价">
                    <span>{{ props.row.cost }}</span>
                  </el-form-item>
                  <el-form-item label="收藏">
                    <span>{{ props.row.collectCount }}</span>
                  </el-form-item>
                  <el-form-item label="虚拟销量">
                    <span>{{ props.row.ficti }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="ID" prop="id"> </el-table-column>
          <el-table-column label="商品图" prop="image">
            <template slot-scope="scope">
              <img :src="scope.row.image" class="img" />
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="storeName"
            width="250"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="商品售价" prop="price"> </el-table-column>
          <el-table-column label="销量" prop="ficti" width="100"> </el-table-column>
          <el-table-column label="库存" prop="stock"> </el-table-column>
          <el-table-column label="排序" prop="sort"> </el-table-column>
          <el-table-column label="添加时间" prop="addTime"> </el-table-column>
          <el-table-column label="状态" prop="isShow" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isShow" active-text="上架" disabled>
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="name">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="go_info(scope.row.id, 1)"
                >详情</el-link
              >
              <el-link type="primary" :underline="false" @click="compile(scope.row.id)"
                >编辑</el-link
              >
              <el-link type="primary" :underline="false">加入回收站</el-link>
            </template>
          </el-table-column>
        </el-tab>
      </el-content>
    </el-tab-pane>
    <el-tab-pane
      :label="`${headers[3].name}` + `(${headers[3].count})`"
      :name="headers[3].name"
    >
      <el-content :num="4" @send="updateList">
        <el-tab :tableData="list3" :num="4">
          <template v-slot:info>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品分类">
                    <span>{{ props.row.cateValues }}</span>
                  </el-form-item>
                  <el-form-item label="市场价">
                    <span>{{ props.row.price }}</span>
                  </el-form-item>
                  <el-form-item label="成本价">
                    <span>{{ props.row.cost }}</span>
                  </el-form-item>
                  <el-form-item label="收藏">
                    <span>{{ props.row.collectCount }}</span>
                  </el-form-item>
                  <el-form-item label="虚拟销量">
                    <span>{{ props.row.ficti }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="ID" prop="id"> </el-table-column>
          <el-table-column label="商品图" prop="image">
            <template slot-scope="scope">
              <img :src="scope.row.image" class="img" />
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="storeName"
            width="250"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="商品售价" prop="price"> </el-table-column>
          <el-table-column label="销量" prop="ficti" width="100"> </el-table-column>
          <el-table-column label="库存" prop="stock"> </el-table-column>
          <el-table-column label="排序" prop="sort"> </el-table-column>
          <el-table-column label="添加时间" prop="addTime"> </el-table-column>
          <el-table-column label="状态" prop="isShow" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isShow" active-text="上架" disabled>
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="name">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="go_info(scope.row.id, 1)"
                >详情</el-link
              >
              <el-link type="primary" :underline="false">恢复商品</el-link>
              <el-link type="primary" :underline="false">删除</el-link>
            </template>
          </el-table-column>
        </el-tab>
      </el-content>
    </el-tab-pane>
    <el-tab-pane
      :label="`${headers[4].name}` + `(${headers[4].count})`"
      :name="headers[4].name"
    >
      <el-content :num="5" @send="updateList">
        <el-tab :tableData="list4" :num="5">
          <template v-slot:info>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品分类">
                    <span>{{ props.row.cateValues }}</span>
                  </el-form-item>
                  <el-form-item label="市场价">
                    <span>{{ props.row.price }}</span>
                  </el-form-item>
                  <el-form-item label="成本价">
                    <span>{{ props.row.cost }}</span>
                  </el-form-item>
                  <el-form-item label="收藏">
                    <span>{{ props.row.collectCount }}</span>
                  </el-form-item>
                  <el-form-item label="虚拟销量">
                    <span>{{ props.row.ficti }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="ID" prop="id"> </el-table-column>
          <el-table-column label="商品图" prop="image">
            <template slot-scope="scope">
              <img :src="scope.row.image" class="img" />
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            prop="storeName"
            width="250"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column label="商品售价" prop="price"> </el-table-column>
          <el-table-column label="销量" prop="ficti" width="100"> </el-table-column>
          <el-table-column label="库存" prop="stock"> </el-table-column>
          <el-table-column label="排序" prop="sort"> </el-table-column>
          <el-table-column label="添加时间" prop="addTime"> </el-table-column>
          <el-table-column label="状态" prop="isShow">
            <template slot-scope="scope" width="100">
              <el-switch v-model="scope.row.isShow" active-text="上架" disabled>
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="name">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false">详情</el-link>

              <el-link type="primary" :underline="false">加入回收站</el-link>
            </template>
          </el-table-column>
        </el-tab>
      </el-content>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
const content = () => import("./content.vue");
const Tab = () => import("./Table.vue");
// 引入axios
import {
  offShell,
  product_list,
  getHeaders,
  putOnShell,
} from "@/network/api/store/index";
export default {
  created() {
    // let { headers, productList } = this.$props;
    // console.log(123, productList);
    // this.activeName =
  },
  data() {
    return {
      activeName: "出售中商品",
      tableData: [], //表格数据
      list: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      headers: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    updateList(val, msg) {
      switch (msg) {
        case 1:
          this.list = [...val];
          break;
        case 2:
          this.list1 = [...val];
          break;
        case 3:
          this.list2 = [...val];
          break;
        case 4:
          this.list3 = [...val];
          break;
        case 5:
          this.list4 = [...val];
          break;
      }
    },
    // 商品下架
    async down1(id, type) {
      // 商品下架接口
      let res = await offShell(id);
      // 调用接口重新刷新页面

      let allPromise = Promise.all([product_list(1, 20, type), product_list(1, 20, 2)]);
      let values = await allPromise;
      let v = await getHeaders();
      values.forEach((item) => {
        item.data.data.list.forEach((ite) => {
          let timestamp = ite.addTime;

          let newDate = new Date();

          newDate.setTime(timestamp * 1000);
          ite.addTime = newDate.toLocaleDateString();
        });
      });
      this.list = [...values[0].data.data.list];
      this.list1 = [...values[1].data.data.list];
      this.headers = [...v.data.data];
    },
    // 商品上架
    async down2(id, type) {
      let res = await putOnShell(id);
      // 调用接口重新刷新页面
      let allPromise = Promise.all([product_list(1, 20, type), product_list(1, 20, 1)]);
      let values = await allPromise;
      let v = await getHeaders();
      values.forEach((item) => {
        item.data.data.list.forEach((ite) => {
          let timestamp = ite.addTime;

          let newDate = new Date();

          newDate.setTime(timestamp * 1000);
          ite.addTime = newDate.toLocaleDateString();
        });
      });
      this.list = [...values[1].data.data.list];
      this.list1 = [...values[0].data.data.list];
      this.headers = [...v.data.data];
    },
    // 出售中的商品页面详情跳转
    go_info(id, type) {
      // 进行编程式导航
      this.$router.push({ name: "creatProduct", params: { id, type } });
    },
    // 编辑
    compile(id) {
      this.$router.push({ name: "creatProduct", params: { id } });
    },
  },
  props: {
    headerList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    productList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    productList1: {
      type: Array,
      default: function () {
        return [];
      },
    },
    productList2: {
      type: Array,
      default: function () {
        return [];
      },
    },
    productList3: {
      type: Array,
      default: function () {
        return [];
      },
    },
    productList4: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  components: {
    "el-content": content,
    "el-tab": Tab,
  },
  watch: {
    productList(newValue, oldValue) {
      this.list = [...newValue];
    },
    productList1(newValue, oldValue) {
      this.list1 = [...newValue];
    },
    productList2(newValue, oldValue) {
      this.list2 = [...newValue];
    },
    productList3(newValue, oldValue) {
      this.list3 = [...newValue];
    },
    productList4(newValue, oldValue) {
      this.list4 = [...newValue];
    },
    headerList(newValue, oldValue) {
      this.headers = [...newValue];
    },
  },
};
</script>
<style scoped lang="scss">
// 用户图片样式
.img {
  width: 30px;
  height: 30px;
}
.el-table {
  font-size: 5px !important;
}
.el-link {
  font-size: 12px;
  // margin-right: 10px;
}
.el-link:hover {
  text-decoration: none !important;
}
// 商品名称
// el-table-column {
//   border: 1px solid black !important;
// }
.cell {
  > a:first-child {
    margin-right: 2px;
  }
  > a:last-child {
    margin-left: 2px;
  }
}
::v-deep .el-switch__core,
.el-switch__label {
  span {
    font-size: 30px !important;
  }
}

/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
  span {
    font-size: 12px;
  }
}
</style>
